<template>
  <div class="built-in-theme">
    <ul class="theme-list">
      <li class="theme-item"
        :class="[themeCurrent === t.value ? 'theme-active' : '']"
        v-for="(t, i) in systemAddedThemes"
        :key="i"
        @click="selectTheme(t)">
        <p class="theme-name">{{ t.label }}</p>
        <img class="theme-preview"
          :id="`ct${t.id}`"
          :src="t.previewSrc"
          :alt="t.label" />
      </li>
    </ul>
    <div class="custom-theme">
      <p class="custom-theme-title">{{$t("cmlpanel.customTheme")}}</p>
      <!-- 自定义主题 预览 -->
      <ul class="custom-theme-list">
        <li class="custom-theme-item"
          :class="[
            editThemeId === t.id ? 'edit-active' : '',
            themeCurrent === t.value ? 'custom-theme-active' : ''
          ]"
          v-for="(t, i) in customAddedThemes"
          :key="i">
          <div class="custom-theme-img-box"
            @click="selectTheme(t)">
            <img :src="t.previewSrc"
              :alt="t.label"
              :id="`ct${t.id}`"
              class="custom-theme-preview" />
          </div>
          <div class="custom-theme-edit">
            <input type="text"
              class="theme-name-input"
              :value="t.label"
              @keyup.enter="themeSaveName(t, $event)"
              @blur="themeSaveName(t, $event)"
              :disabled="editThemeId !== t.id"
              :ref="`ct${t.id}`"
              :placeholder="$t('cmlpanel.inputThemeName')">
            <button class="theme-btn theme-edit"
              :class="[editThemeId === t.id ? 'active': '']"
              @click.stop="themeEdit(t)">{{editThemeId === t.id ? $t("cmlpanel.cancel"): $t("cmlpanel.edit")}}</button>
            <button class="theme-btn theme-delete"
              :class="[editThemeId === t.id ? 'active': '']"
              @click.stop="themeDelete(t)">{{$t("cmlpanel.delete")}}</button>
          </div>
          <div class="theme-add-popup"
            v-if="editThemeId === t.id">
            <theme-add :filters="t.config"
              @change="changThemeParams(t, $event)"
              @save="modifyCurrentTheme(t, $event)"></theme-add>
          </div>
        </li>
        <!-- 添加主题部分 -->
        <li class="custom-theme-item"
          v-if="isShowThemeAdd">
          <div class="custom-theme-img-box">
            <img :src="systemAddedThemes[0].previewSrc"
              :alt="currentThemeConfigAdd.label"
              id="themePreview"
              class="custom-theme-preview" />
          </div>
          <div class="custom-theme-edit">
            <input type="text"
              class="theme-name-input"
              v-model="currentThemeConfigAdd.label"
              :placeholder="$t('cmlpanel.inputThemeName')">
            <button class="theme-btn theme-edit active"
              @click.stop="cancelAddCustomTheme">{{$t("cmlpanel.cancel")}}</button>
            <button class="theme-btn theme-delete hide"></button>
          </div>
          <div class="theme-add-popup"
            v-if="isShowThemeAdd">
            <theme-add :filters="currentThemeConfigAdd.config"
              @change="changNewThemeParams"
              @save="saveNewTheme"></theme-add>
          </div>
        </li>
      </ul>
      <!-- 添加主题按钮 -->
      <div class="add-theme-btn-box"
        v-if="!isShowThemeAdd">
        <button class="add-theme-btn"
          @click="addCustomTheme">+ {{$t("cmlpanel.add")}}</button>
      </div>
    </div>
  </div>
</template>
<script>
import { Slider } from 'ant-design-vue'
import ThemeAdd from './theme-add'
import {themeServer as ts} from 'anov-core'

export default {
  name: 'BuiltInTheme',
  components: {
    ASlider: Slider,
    ThemeAdd
  },
  model: {},
  props: {},
  data() {
    return {
      config: {
        opacity: 100,
        brightness: 100, // 亮度
        contrast: 100, // 对比度
        grayscale: 50, // 灰度
        hueRotate: 0, // 色相
        invert: 0, // 反向
        saturate: 100, // 饱和度
        sepia: 0 // 褐色
      },
      // 是否显示添加主题的选择参数
      isShowThemeAdd: false,
      // 添加主题的样式
      themeAddMode: 'add', // modify
      editThemeId: '', //当前编辑的主题的id
      currentThemeConfigAdd: {
        label: '',
        value: '',
        previewSrc: '',
        config: {
          opacity: 100,
          brightness: 100, // 亮度
          contrast: 100, // 对比度
          grayscale: 0, // 灰度
          hueRotate: 0, // 色相
          invert: 0, // 反向
          saturate: 100, // 饱和度
          sepia: 0 // 褐色
        }
      },
      currentThemeConfig: {
        label: '',
        value: '',
        previewSrc: '',
        config: {
          opacity: 100,
          brightness: 100, // 亮度
          contrast: 100, // 对比度
          grayscale: 0, // 灰度
          hueRotate: 0, // 色相
          invert: 0, // 反向
          saturate: 100, // 饱和度
          sepia: 0 // 褐色
        }
      }
    }
  },
  computed: {
    ...ts.mapGetters([
      'systemAddedThemes',
      'customAddedThemes',
      'currentTheme'
    ]),
    themeCurrent() {
      return this.currentTheme.value
    }
  },
  watch: {
    customAddedThemes: {
      handler: function(theme) {
        this.$nextTick(() => {
          this.initAllThemes(theme)
        })
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initAllThemes(this.systemAddedThemes)
      this.initAllThemes(this.customAddedThemes)
    })
  },
  beforeDestroy() {},
  methods: {
    ...ts.mapMutations([
      'addTheme',
      'deleteTheme',
      'modifyTheme',
      'modifyThemeName',
      'setTheme'
    ]),
    // 初始化设置主题
    initAllThemes(themes) {
      for (let i = 0; i < themes.length; i++) {
        let t = themes[i].config
        ts.applyTheme(`#ct${themes[i].id}`, t)
      }
    },
    selectTheme(theme) {
      this.setTheme(theme.value)
      ts.applyTheme('#cmlFilterContainer', this.currentTheme.config)
    },

    // 添加用户自定义主题
    addCustomTheme() {
      this.isShowThemeAdd = true
    },
    // 保存主题
    saveNewTheme(params) {
      let ct = this.currentThemeConfigAdd
      let theme = {
        label: ct.label || Date.now() + '',
        value: ct.label || Date.now() + '',
        type: 'custom',
        id: Date.now() + '',
        previewSrc: this.systemAddedThemes[0].previewSrc,
        config: {
          ...params
        }
      }
      // 保存到state
      this.addTheme(theme)
      this.currentThemeConfigAdd.label = ''
      // 关闭添加主题
      this.isShowThemeAdd = false
    },
    // 修改新添加的自定义主题参数
    changNewThemeParams(params) {
      ts.applyTheme('#cmlFilterContainer', params)
      ts.applyTheme('#themePreview', params)
    },
    // 取消添加新主题
    cancelAddCustomTheme() {
      ts.applyTheme('#cmlFilterContainer', this.currentTheme.config)
      // 复位数据
      this.currentThemeConfigAdd.label = ''
      this.isShowThemeAdd = false
    },
    // 修改自定义主题参数
    changThemeParams(theme, params) {
      ts.applyTheme('#cmlFilterContainer', params)
      ts.applyTheme(`#ct${theme.id}`, params)
    },
    // 修改主题
    modifyCurrentTheme(t, params) {
      let { id, label } = t
      this.modifyTheme({ id, label, params })
      this.setTheme(t.value)
      // todo 选中
      // this.themeCurrent = t.value
      this.editThemeId = ''
    },
    // 保存主题名称
    themeSaveName(theme, event) {
      let label = event.target.value
      if (event.type === 'keyup' && event.code === 'Enter') {
        event.target.blur()
      } else {
        this.modifyThemeName({ id: theme.id, label })
      }
    },
    // 编辑主题
    themeEdit(theme) {
      // 取消
      if (this.editThemeId === theme.id) {
        this.editThemeId = ''
        ts.applyTheme(`#ct${theme.id}`, theme.config)
        ts.applyTheme('#cmlFilterContainer', this.currentTheme.config)
        return
      }
      // 编辑
      this.editThemeId = theme.id
      this.currentThemeConfig = theme
      // 选中input
      let id = `ct${theme.id}`
      this.$nextTick(() => {
        this.$refs[id][0].focus()
      })
    },
    // 删除主题
    themeDelete(theme) {
      this.deleteTheme(theme.id)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/panel-var.scss';
.built-in-theme {
  color: $text-color;
  .theme-list {
    padding: 20px;
    width: 300px;
    .theme-item {
      display: flex;
      overflow: hidden;

      position: relative;

      margin-bottom: 20px;
      border: 1px solid transparent;

      transition: all ease 0.2s;

      cursor: pointer;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
      &:hover {
        box-shadow: inset 0 0 20px 6px #e9e9e973;
        .theme-name {
          // transform: translateY(0);
        }
      }
      .theme-name {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;

        width: 100%;
        padding: 0 10px;

        background: linear-gradient(#ffffff00, #0000009c);

        line-height: 32px;
        text-align: left;

        transition: all ease 0.2s;
      }
      .theme-preview {
        width: 100%;
        height: 100%;
      }

      &.theme-active {
        outline: 1px solid $text-active-color;
        box-shadow: 0 0 5px $text-active-color;
      }
    }
  }
  // 自定义主题
  .custom-theme {
    padding: 20px;
    width: 300px;
    .custom-theme-title {
      padding: 5px 0 20px;

      text-align: left;
    }
    .custom-theme-list {
      padding: 0;
      .custom-theme-item {
        margin: 0 0 20px;
        position: relative;
        &:hover {
          .custom-theme-edit {
            .theme-btn {
              opacity: 1;
              visibility: visible;
            }
          }
        }
        &.edit-active {
          outline: 1px solid #668d93;
          box-shadow: 0 0 5px #c1fffb;
        }
        &.custom-theme-active {
          outline: 1px solid $text-active-color;
          box-shadow: 0 0 5px $text-active-color;
        }
        .custom-theme-img-box {
          box-sizing: border-box;

          cursor: pointer;
          &:nth-last-child(1) {
            margin-bottom: 0;
          }

          .custom-theme-preview {
            width: 100%;
            height: 100%;
          }
        }
        .custom-theme-edit {
          display: flex;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 5px 0;
          background: linear-gradient(#ffffff00, #0000009c);
          .theme-name-input {
            padding: 0 5px;
            border: none;

            color: $text-color;
            background-color: transparent;

            font-size: 12px;
            &:focus {
              background-color: #d8d4d463;
            }
          }
          .theme-btn {
            padding: 0 10px;
            border: none;
            width: 50px;
            color: $text-color;
            background-color: transparent;
            opacity: 0;
            visibility: hidden;
            &.active {
              opacity: 1;
              visibility: visible;
            }
          }
          .theme-edit {
            margin-left: auto;
            position: relative;
            &.active {
              color: $text-active-color;
            }
          }
          .theme-delete {
            color: #c82a43;
            border-left: 1px solid $line-color;
            &.hide {
              visibility: hidden;
              opacity: 0;
            }
          }
        }
        .theme-add-popup {
          width: 100%;
        }
      }
    }

    .add-theme-btn-box {
      width: 100%;
      height: 40px;
      margin-top: 20px;
      box-sizing: border-box;
      border: 1px solid currentColor;

      color: $line-color;

      transition: all ease 0.2s;
      .add-theme-btn {
        width: 100%;
        height: 100%;
        border: none;

        color: inherit;
        background: transparent;
      }
      &:hover {
        color: $text-color;
      }
    }
  }
}
</style>
